<template>
    <div class="row list-panel">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>商品信息</a></li>
                        <li><a>商务洽谈</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width="80px" size="small">
                        <el-row>
                            <el-form-item label="公司名称">
                                <el-input v-model="queryForm.companyName" placeholder="公司名称"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="queryForm.status" placeholder="请选择" clearable>
                                    <el-option label="待洽谈" value="1"></el-option>
                                    <el-option label="已洽谈" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="float: right;">
                                <a class="revision-btn" href="javaScript:void(0)" @click="onQuery">搜 索</a>&nbsp;&nbsp;
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <!--<div class="col-sm-12" style="padding: 12px 0px 12px 0px;">-->
                    <!--<div class="alert alert-info" style="margin-bottom: 0px">-->
                    <!--<a class="revision-btn" href="javaScript:void(0)" @click="dialogFormVisible = true">新增</a>-->
                    <!--<a class="revision-btn">批量删除</a>&nbsp;&nbsp;-->
                    <!--</div>-->
                    <!--</div>-->

                    <template v-if="data != null">
                        <el-table ref="multipleTable" class="list-table" :border="true" :data="data.list"
                                  tooltip-effect="dark" :header-cell-style="{'background-color': '#F5F5F6'}"
                                  max-height="600"
                                  style="width: 100%">
                            <!--                            <el-table-column type="selection" align="center" width="55">-->
                            <!--                            </el-table-column>-->
                            <template v-for="columnName in columnNames">
                                <template v-if="columnName.prop === 'isRecommend'">
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <i class="el-icon-error" style="color:#F00;"
                                               v-if="scope.row.isRecommend === 0"></i>
                                            <i class="el-icon-success" style="color:#1ab394;"
                                               v-if="scope.row.isRecommend === 1"></i>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'status'">
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color:#F00;" v-if="scope.row.status === 1">待洽谈</span>
                                            <span style="color:#1ab394;" v-if="scope.row.status === 2">已洽谈</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'user.realName'">
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                    </el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                    </el-table-column>
                                </template>
                            </template>
                            <el-table-column align="center" fixed="right" label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.status === 1" type="text"
                                               @click="checkCommucation(scope.row)"
                                               size="small">处理
                                    </el-button>
                                    <el-button v-else type="text" disabled size="small">已处理
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-pagination style="float: right;margin-top: 10px" @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange" :current-page.sync="data.currPage"
                                   :page-size="data.pageSize"
                                   layout="total, prev, pager, next" :total="data.totalCount">
                    </el-pagination>
                    <edit-remark-modal ref="editRmk" :showAddModal="showAddModal" @editRemark="editRemark"
                                       @cancelEditRmkModal="cancelEditRmkModal"></edit-remark-modal>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import EditRemarkModal from './editRemarkModal';

    export default {
        components: {EditRemarkModal},
        name: 'Commucation',
        data() {
            return {
                categoryList: [],
                dialogFormVisible: false,
                showAddModal: false,
                queryForm: {
                    companyName: '',
                    status: ''
                },
                columnNames: [{
                    label: '姓名',
                    prop: 'user.realName',
                    width: 60
                }, {
                    label: '手机号码',
                    prop: 'user.mobile',
                    width: 80
                }, {
                    label: '公司名称',
                    prop: 'companyName',
                    width: 120
                }, {
                    label: '地址',
                    prop: 'address',
                    width: 120
                }, {
                    label: '客户洽谈内容',
                    prop: 'remark',
                    width: 200
                }, {
                    label: '状态',
                    prop: 'status',
                    width: 20
                }, {
                    label: '创建时间',
                    prop: 'createTime',
                    width: 100
                }, {
                    label: '洽谈结果与备注',
                    prop: 'followUp',
                    width: 120
                }

                ],
                multipleSelection: [],
                data: {},
                query: {
                    page: ''
                }
            }
        },
        mounted: function () {
            this.listAllCooperations();
        },
        methods: {
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.queryForm.page = val;
                this.listAllCooperations(this.queryForm);
            },
            async listAllCooperations(queryForm) {
                let res = await this.$api.get('/mall/cooperate/list', queryForm);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            },
            onQuery() {
                this.listAllCooperations(this.queryForm);
            },
            onReset() {
                this.queryForm = this.$options.data().queryForm;
                this.listAllCooperations();
            },
            onCancelNewModal() {
                this.dialogFormVisible = false;
            },
            onSubmitNewModal() {
                this.dialogFormVisible = false;
            },
            checkCommucation(item) {
                this.showAddModal = true;
                this.$refs.editRmk.getInfo(item.id);
            },
            cancelEditRmkModal() {
                this.showAddModal = false;
            },
            async editRemark(id, rmk) {
                let put_data = {
                    id: id,
                    remark: rmk,
                    status: 2
                };
                let res = await this.$api.post('/mall/cooperate/update', put_data);
                if (res.code === 0) {
                    this.showAddModal = false;
                    this.listAllCooperations(this.queryForm);
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .list-panel .content-wrapper /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        font-weight: normal;
    }

    .list-table {
        font-size: 12px;
    }
</style>
